.video-container {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;

  & video {
    z-index: 0;
    /** 使视频全屏。并保证填满屏幕 */
    width: 100vw;
    height: 100vh;
    object-fit: fill;
  }

  & .controls {
    position: absolute;
    bottom: 0.625rem;
    right: 0.625rem;
    z-index: 3;
    & .video-btn {
      background-position: center;
      background-size: cover;
      cursor: pointer;
      opacity: 0.8;
      animation: poi-face 10s linear infinite alternate;
      width: 2rem;
      height: 2rem;

      &:hover {
        opacity: 1;
      }

      &.video-play {
        background-image: var(--video-play-image);
      }

      &.video-pause {
        background-image: var(--video-pause-image);
        display: none;
      }
    }
  }

  & .video-status {
    position: absolute;
    bottom: -6.25rem;
    left: 0;
    right: 0;
    margin: auto;
    padding: 0.625rem 0;
    text-align: center;
    color: #fff;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 0;
    font-size: 1.125rem;
    transition: 0.4s ease all;
  }

  @mixin screens-md {
    display: none;
  }
}

@keyframes poi-face {
  2%,
  24%,
  80% {
    transform: translate(0, 1.5px) rotate(1.5deg);
  }

  4%,
  68%,
  98% {
    transform: translate(0, -1.5px) rotate(-0.5deg);
  }

  38%,
  6% {
    transform: translate(0, 1.5px) rotate(-1.5deg);
  }

  8%,
  86% {
    transform: translate(0, -1.5px) rotate(-1.5deg);
  }

  10%,
  72% {
    transform: translate(0, 2.5px) rotate(1.5deg);
  }

  12%,
  64%,
  78%,
  96% {
    transform: translate(0, -0.5px) rotate(1.5deg);
  }

  14%,
  54% {
    transform: translate(0, -1.5px) rotate(1.5deg);
  }

  16% {
    transform: translate(0, -0.5px) rotate(-1.5deg);
  }

  18%,
  22% {
    transform: translate(0, 0.5px) rotate(-1.5deg);
  }

  20%,
  36%,
  46% {
    transform: translate(0, -1.5px) rotate(2.5deg);
  }

  26%,
  50% {
    transform: translate(0, 0.5px) rotate(0.5deg);
  }

  28% {
    transform: translate(0, 0.5px) rotate(1.5deg);
  }

  30%,
  40%,
  62%,
  76%,
  88% {
    transform: translate(0, -0.5px) rotate(2.5deg);
  }

  32%,
  34%,
  66% {
    transform: translate(0, 1.5px) rotate(-0.5deg);
  }

  42% {
    transform: translate(0, 2.5px) rotate(-1.5deg);
  }

  44%,
  70% {
    transform: translate(0, 1.5px) rotate(0.5deg);
  }

  48%,
  74%,
  82% {
    transform: translate(0, -0.5px) rotate(0.5deg);
  }

  52%,
  56%,
  60% {
    transform: translate(0, 2.5px) rotate(2.5deg);
  }

  58% {
    transform: translate(0, 0.5px) rotate(2.5deg);
  }

  84% {
    transform: translate(0, 1.5px) rotate(2.5deg);
  }

  90% {
    transform: translate(0, 2.5px) rotate(-0.5deg);
  }

  92% {
    transform: translate(0, 0.5px) rotate(-0.5deg);
  }

  94% {
    transform: translate(0, 2.5px) rotate(0.5deg);
  }

  0%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
